<template>
	<navigatorComp title="生平简介" bgcColor="#121512" fontColor="#fff"></navigatorComp>
	<view class="content">
		<view class="title">逝者生平简介</view>
		<up-textarea
			disableDefaultPadding
			:adjustPosition="false"
			placeholderClass="placeholderClass"
			v-model="summarized"
			placeholder="生平简介~"
			count
			height="700rpx"
			border="none"
			maxlength="150"
		></up-textarea>
		<footerBtn name="提交" @clickBtn="submit" bgcColor="#121512"></footerBtn>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import footerBtn from '/components/footerBtn/index.vue';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();
const memorialId = ref(); //墓园id
const summarized = ref(); //简介内容

onLoad((options) => {
	memorialId.value = JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId;
	query();
});

/**
 * 点击提交
 */
const submit = () => {
	homeApi
		.modifySummarizedApi({
			memorialId: memorialId.value,
			summarized: summarized.value
		})
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '提交成功'
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			}
		})
		.catch(() => {});
};
const query = () => {
	homeApi
		.getMemorialSummarized({ memorialId: memorialId.value })
		.then((res) => {
			if (res.code === 0) {
				summarized.value = res.data.summarized;
			}
		})
		.catch(() => {});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.content {
	background-color: #121512;
}

.title {
	font-weight: 400;
	font-size: 32rpx;
	color: #ececec;
	line-height: 38rpx;
	margin: 32rpx 0;
}

::v-deep .placeholderClass {
	font-weight: 400 !important;
	font-size: 28rpx !important;
	color: #969da3 !important;
	line-height: 33rpx !important;
}

::v-deep .u-textarea {
	background: #333333 !important;
	padding: 32rpx 40rpx !important;
	box-sizing: border-box !important;
}

::v-deep .u-textarea__field {
	color: #fff !important;
	font-size: 28rpx !important;
	text-align: justify !important;
}

::v-deep .u-textarea__count {
	background: none !important;
	font-weight: 400 !important;
	font-size: 28rpx !important;
	color: #969da3 !important;
	line-height: 33rpx !important;
	margin-right: 25rpx;
	margin-bottom: 24rpx;
	padding: 0;
}

.footerBtn {
	width: 100%;

	.area {
		width: 100%;
		height: 96rpx;
	}

	.btn {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		width: 400rpx;
		height: 88rpx;
		background: #f3e0bb;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-size: 32rpx;
		color: #524630;
		line-height: 88rpx;
		letter-spacing: 1px;
		text-align: center;
		bottom: calc(env(safe-area-inset-bottom) + 8rpx);
	}
}
</style>
